<!--
*  2021-03-15
*  退料详情
-->
<template>
  <div id="app" class="receive-detail">
    <!-- 头部导航 -->
    <van-nav-bar
      :title="title"
      ref="header"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>

    <!-- 滚动 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
    >
      <van-cell-group v-show="tableData.length !== 0">
        <van-cell
          v-for="(data, index) in tableData"
          :key="index"
          :title="'编号: ' + data.standardNo"
        >
          <template slot="label">
            <div class="receive-detail-cell">
              <div>颜色: {{ data.yarnColor }}</div>
              <div>
                <span>规格: {{ data.yarnStrandard }}</span>
                <span>重量: {{ data.weight }}</span>
              </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        v-show="tableData.length === 0"
        description="暂无数据"
      />
    </better-scroll>

    <van-cell-group class="receive-detail-btn" v-show="tableData.length !== 0">
      <van-button block type="info" class="bgColor" @click="onGetNextInfo"
        >已全部退回并提交</van-button
      >
    </van-cell-group>
  </div>
</template>

<script>
import { openWin } from "@/utils/index";
import { getWeavingPlan, getNextInfo, getNextCommit } from "@/api/yarn";

export default {
  name: "materialReturnDetail",
  data() {
    return {
      title: "退料详情",
      currentPage: 1,
      totalPage: 1,
      tableData: [],
      count: "",
      taskId: "",
      stepNo: "",
      nextStepNo: "",
      stepId: "",
      resId: "",
      nextStepIndex: "",
      nextStepData: [],
      flowType: "",
      doingResUrl: "",
      resParams: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      that.doingResUrl = window.api.pageParam.doingResUrl;
      that.flowType = window.api.pageParam.flowType;
      that.stepId = window.api.pageParam.stepId;
      that.resId = window.api.pageParam.resId;
      that.nextStepNo = window.api.pageParam.nextStepNo;
      that.taskId = window.api.pageParam.taskId;
      that.stepNo = window.api.pageParam.stepNo;
      that.onGetTableData();
      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },
    // 返回列表
    onClickLeft() {
      openWin("material-return");
    },
    // 获取领料详情
    onGetTableData() {
      const that = this;
      that.tableData = [];
      getWeavingPlan(
        {
          resUrl:
            process.env.VUE_APP_YARN_URL + that.doingResUrl + "/" + that.stepId,
        },
        (res) => {
          that.resParams = JSON.stringify({
            stepId: that.stepId,
            stepNo: that.stepNo,
            stepName: "纱料退回",
            items: res.items,
          });
          let data = eval("(" + res.items[0].value + ")");
          data.forEach((item) => {
            that.tableData.push(JSON.parse(item));
          });
        }
      );
    },
    // 获取下一步信息
    onGetNextInfo() {
      const that = this;
      that.nextStepData = [];
      getNextInfo(
        {
          flowType: that.flowType,
          stepNo: that.stepNo,
        },
        function (res) {
          that.nextStepNo.split(",").forEach((item, i) => {
            that.nextStepData.push(
              item.split("_")[0] + "@0:" + res[i].depId + "_" + res[i].postId
            );
          });
          that.nextStepIndex = that.nextStepData.join(",");
          that.onGetNextCommit();
        }
      );
    },
    // 确认提交
    onGetNextCommit() {
      const that = this;
      getNextCommit(
        {
          taskId: that.taskId,
          stepNo: that.stepNo,
          nextStepIndex: that.nextStepIndex,
          loopCount: "1",
          resId: that.resId,
          resParams: that.resParams,
        },
        function () {
          that.$toast({
            type: "success",
            message: "退料成功",
            onClose: () => {
              openWin("material-return");
            },
          });
        }
      );
    },
  },
};
</script>

<style lang="scss">
.receive-detail {
  // padding-top: 22px;

  .public-scroll {
    height: calc(100vh - 150px);
    overflow: hidden;
    .receive-detail-cell {
      display: flex;
      flex-direction: column;
      & > div {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .receive-detail-btn {
    padding: 16px;
    &.van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border-width: 0;
    }
  }
}
</style>
